<template>
  <div v-loading="loading">
    <card-box title="条件筛选布局" icon="icon-template_template">
      <div slot="card-content">
        <div class="filter-box-wrapper animated" :class="showFilterBox?'bounce':''">
          <div class="btn_showMoreItem" @click="showMoreItem">
            <i :class="'iconfont '+(styleObject.height=='60px'?'icon-avatar-man':'icon-eye_close')"></i>
          </div>
          <el-row :gutter="5" class="filter-box" :style="styleObject">
            <el-col :xs="12" :sm="8" :lg="6">
              <div class="filter-box-content clearfix">
                <span class="lable">编码：</span>
                <el-input placeholder="请输入内容" size="small" v-model="filterOpt.input1" clearable></el-input>
              </div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="6">
              <div class="filter-box-content clearfix">
                <span class="lable">下拉选择:</span>
                <el-select v-model="filterOpt.select1" size="small" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="6">
              <div class="filter-box-content clearfix">
                <span class="lable">日期选择:</span>
                <el-date-picker
                  size="small"
                  v-model="filterOpt.dateValue"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="6">
              <div class="filter-box-content clearfix">
                <span class="lable">凑数占位:</span>
                <el-input placeholder="请输入内容" size="small" v-model="filterOpt.input1" clearable></el-input>
              </div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="6">
              <div class="filter-box-content clearfix">
                <span class="lable">凑数占位:</span>
                <el-input placeholder="请输入内容" size="small" v-model="filterOpt.input1" clearable></el-input>
              </div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="6">
              <div class="filter-box-content clearfix">
                <span class="lable">凑数占位:</span>
                <el-input placeholder="请输入内容" size="small" v-model="filterOpt.input1" clearable></el-input>
              </div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="6">
              <div class="filter-box-content clearfix">
                <span class="lable">凑数占位:</span>
                <el-input placeholder="请输入内容" size="small" v-model="filterOpt.input1" clearable></el-input>
              </div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="6">
              <div class="filter-box-content clearfix">
                <span class="lable">凑数占位:</span>
                <el-input placeholder="请输入内容" size="small" v-model="filterOpt.input1" clearable></el-input>
              </div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="6">
              <div class="filter-box-content clearfix">
                <span class="lable">凑数占位:</span>
                <el-input placeholder="请输入内容" size="small" v-model="filterOpt.input1" clearable></el-input>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="24">
              <div class="filter-box-button">
                <el-button type="success" @click="searchInfo">查询</el-button>
                <el-button type="info" @click="resetFilter">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="handle-button-box">
          <el-button type="success" @click="searchInfo">新增</el-button>
          <el-button type="primary" @click="resetFilter">编辑</el-button>
          <el-button type="success" @click="searchInfo">查看流程</el-button>
        </div>

        <OptTable
          :datajson="TableJson"
          :formatfn="TableFormatFn"
          @handleSelectionChange="handleSelectionChange"
          @handleRowDblclick="handleRowDblclick"
          @pagingfn="Callback_TablePaging"
        ></OptTable>
      </div>
    </card-box>
  </div>
</template>

<script>
// https://xuliangzhan.github.io/vue-element-extends/#/editable/click6
import CardBox from "@/components/CardBox"
import OptTable from "@/components/OptTable"
export default {
  name: "screeningForm",
  components: { CardBox, OptTable },
  data () {
    return {
      showFilterBox: false,
      styleObject: {
        height: '60px'
      },
      //筛选条件
      filterOpt: {
        input1: "",
        select1: '',
        dateValue: ""
      },
      //下拉框选项
      options: [{
        value: '选项1',
        label: '111'
      }, {
        value: '选项2',
        label: '222'
      }, {
        value: '选项3',
        label: '333'
      }, {
        value: '选项4',
        label: '444'
      }, {
        value: '选项5',
        label: '555'
      }],
      loading: true,
      //表格数据
      TableJson: {
        Config: { type: "selection", Loading: false, ErrorType: null, OrderIsID: true, Order: "102", OrderType: "desc", PagingIndex: 1, PagingSize: 30, PagingCount: 0, RecordCount: 0 },
        Index: [
          { Genre: "name", IndexID: "name", IndexName: "name", IndexText: "姓名", IndexTypeID: 1, IndexTypeName: "基础信息", IsDefault: 1, IsOrder: 0, IsReadOnly: 1, Order: 0, TotalIndexName: "", Width: "50" },
          { Genre: "address", IndexID: "address", IndexName: "address", IndexText: "地址", IndexTypeID: 1, IndexTypeName: "基础信息", IsDefault: 1, IsOrder: 0, IsReadOnly: 1, Order: 0, TotalIndexName: "", Width: "100" },
          { Genre: "date", IndexID: "date", IndexName: "date", IndexText: "日期", IndexTypeID: 1, IndexTypeName: "基础信息", IsDefault: 1, IsOrder: 0, IsReadOnly: 1, Order: 0, TotalIndexName: "", Width: "100" },
        ],
        SumData: [],
        Data: [{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', test: "测试" },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', test: "测试" },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', test: "测试" },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', test: "测试" },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', test: "测试" },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', test: "测试" }]
      },
      //表格数据-格式化方法
      TableFormatFn: (info, genre, isSum, row) => {
        // console.log(genre, isSum, row)
        return info;
      }
    };
  },
  created () {
    this.init();
  },
  methods: {
    showMoreItem () {
      //展开搜索栏
      if (this.styleObject.height == "60px") {
        this.showFilterBox = true;
        this.styleObject = {
          height: "100%"
        }
      } else {
        this.showFilterBox = false;
        this.styleObject = {
          height: "60px"
        }
      }
    },
    //搜索查询
    searchInfo () {
      this.TableJson.Config.ErrorType = 0;//无数据
      this.TableJson.Data = []
    },
    //重置搜索条件
    resetFilter () {
      this.filterOpt = {
        input1: "",
        select1: '',
        dateValue: ""
      }
    },
    //多选选中回调事件
    handleSelectionChange (val) {
      console.log(val)
    },
    //当某一行被双击时会触发该事件
    handleRowDblclick (row, column, event) {
      console.log(row);
      console.log(column);
      console.log(event);
    },
    //表格分页回调事件
    Callback_TablePaging (pagingIndex) {
      console.log("第" + pagingIndex + "页");
      this.TableJson.Config.PagingIndex = pagingIndex;
      this.GetData_Table();//获取列表数据
    },
    init () {
      this.loading = true;
      Promise.all([
        this.loadList(),
        this.getColumnConfigs().then(data => {
          //动态设置 数据列名
          console.log(data);
          this.TableJson.Index = data;
          console.log(this.TableJson.Index)
        })
      ]).then(() => {
        this.loading = false;
      });
    },
    loadList () {
      this.loading = true;
      this.GetData_Table()
    },
    getColumnConfigs () {
      // 模拟数据
      return new Promise(resolve => {
        var column = [{
          "Genre": "name",
          "IndexID": "name",
          "IndexName": "name",
          "IndexText": "姓名",
          "IndexTypeID": 1,
          "IndexTypeName": "基础信息",
          "IsDefault": 1,
          "IsOrder": 0,
          "IsReadOnly": 1,
          "Order": 0,
          "TotalIndexName": "",
          "Width": "50"
        },
        {
          "Genre": "address",
          "IndexID": "address",
          "IndexName": "address",
          "IndexText": "地址",
          "IndexTypeID": 1,
          "IndexTypeName": "基础信息",
          "IsDefault": 1,
          "IsOrder": 0,
          "IsReadOnly": 1,
          "Order": 0,
          "TotalIndexName": "",
          "Width": "100"
        },
        {
          "Genre": "date",
          "IndexID": "date",
          "IndexName": "date",
          "IndexText": "日期",
          "IndexTypeID": 1,
          "IndexTypeName": "基础信息",
          "IsDefault": 1,
          "IsOrder": 0,
          "IsReadOnly": 1,
          "Order": 0,
          "TotalIndexName": "",
          "Width": "100"
        },
        {
          "Genre": "test",
          "IndexID": "test",
          "IndexName": "test",
          "IndexText": "测试列名",
          "IndexTypeID": 1,
          "IndexTypeName": "基础信息",
          "IsDefault": 1,
          "IsOrder": 0,
          "IsReadOnly": 1,
          "Order": 0,
          "TotalIndexName": "",
          "Width": "100"
        }
        ]
        setTimeout(() => resolve(column), 1000);
      });
    },
    GetData_Table () {
      this.TableJson.Config.Loading = true;
      //调接口，拿数据
      // this.TableJson.Config.ErrorType = 0;//无数据
      // this.TableJson.Data = []

      this.TableJson.Config.ErrorType = null;//正常数据
      this.TableJson.Config.PagingCount = 20;//多少页
      this.TableJson.Config.RecordCount = 600;//总数量
    }
  }
};
</script>

<style lang="scss" scoped>
.filter-box-wrapper {
  position: relative;
  .btn_showMoreItem {
    width: 30px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    bottom: -18px;
    right: 10px;
    z-index: 2;
    text-align: center;
    background: #ff9800;
    i {
      color: #fff;
    }
  }
  .filter-box {
    border-top: 1px dashed #d8d8d8;
    border-bottom: 1px dashed #d8d8d8;
    margin: 10px 0px;
    padding: 10px 5px 0 5px;
    height: 60px;
    overflow: hidden;
    .filter-box-content {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .lable {
        padding: 0 3px;
        min-width: 70px;
        white-space: nowrap;
        // text-align: right;
        display: flex;
        align-items: center;
      }
      .el-select,
      .el-input {
        width: 100%;
      }
    }
    .filter-box-button {
      display: flex;
      justify-content: center;
      padding: 10px;
    }
  }
}

.handle-button-box {
  padding: 10px 0;
}

.my-pagination {
  margin: 15px 20px 0 0;
  text-align: right;
}
</style>

<style>
.custom-wrapper {
  height: 200px;
  overflow: auto;
  list-style: decimal;
}
</style>
